<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员中心-用户管理</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>
</head>
<body>
<div class="row" id="userListApp">
    <div class="center-block">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-lg-1">
                    <ul class="list-group" id="mySelect">
                        <li class="list-group-item " style="background-color: #E83737">用户管理</li>
                        <li class="list-group-item " style="background-color: white"><a
                                style="text-decoration: none;color: black" href="administrator_goods.html">商品管理</a></li>
                        <li class="list-group-item " style="background-color: white"><a
                                style="text-decoration: none;color: black" href="administrator_classify.html">分类管理</a>
                        </li>
                        <li class="list-group-item" style="background-color: white"><a
                                style="text-decoration: none;color: black" href="">订单管理</a></li>
                        <li class="list-group-item " style="background-color: white"><a
                                style="text-decoration: none;color: black" href="administrator_store.html">店铺管理</a></li>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <table class="table table-hover">
                        <tr>
                            <th style='text-align: center;'>头像</th>
                            <th style='text-align: center;'>昵称</th>
                            <th style='text-align: center;'>姓名</th>
                            <th style='text-align: center;'>性别</th>
                            <th style='text-align: center;'>电话</th>
                            <th style='text-align: center;'>账号</th>
                            <th style='text-align: center;'>余额</th>
                            <th style='text-align: center;'>角色</th>
                            <th style='text-align: center;'>操作</th>
                        </tr>
                        <tr v-for="item in userList">
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'><img
                                    :src="item.headPortrait" class="img-circle" style="width: 40px;height: 40px;"></td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                                {{item.screenName}}
                            </td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.name}}</td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.sex}}</td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.phone}}</td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.email}}</td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>{{item.account}}
                            </td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'
                                v-if="item.role===0">普通用户
                            </td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'
                                v-if="item.role===1">商家
                            </td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'
                                v-if="item.role===2">管理员
                            </td>
                            <td rowspan=$rowspan style='vertical-align: middle;text-align: center;'>
                                <button v-if="item.isValid===0" class="btn btn-danger" @click="forbidUser(item.id)">封停
                                </button>
                                <button v-else class="btn btn-success" @click="unForbidUser(item.id)">解封</button>
                                <button class="btn btn-default" @click="deleteUser(item.id)">删除</button>
                            </td>
                        </tr>
                    </table>
                    <div class="paging" style="text-align:right">
                        <span>第{{page.currentPage}}/{{page.totalPage}}页</span>&nbsp;&nbsp;
                        <span>总记录数：{{page.totalCount}}&nbsp;&nbsp;每页显示:{{page.pageSize}}</span>&nbsp;&nbsp;
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li v-if="page.currentPage!==1">
                                    <span @click="getUserList(1)">首页</span>
                                    <span @click="getUserList(page.currentPage-1)" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                        </span>
                                </li>
                                <li v-else class="disabled">
                                    <span>首页</span>
                                    <span aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                        </span>
                                </li>
                                <li v-if="page.currentPage!==page.totalPage && page.totalPage!==0">
                                <span @click="getUserList(page.currentPage+1)" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                                    <span @click="getUserList(page.totalPage)">尾页</span>
                                </li>
                                <li v-else class="disabled">
                                <span aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </span>
                                    <span>尾页</span>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#userListApp",
        data: {
            userList: [],
            page: {}
        },
        mounted: function () {
            this.getUserList(1);
        },
        methods: {
            getUserList: function (currentPage) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AdministratorController/getAllUser",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        currentPage: currentPage
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            _this.userList = result.data.userList;
                            _this.page = result.data.page;
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            deleteUser: function (id) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AdministratorController/deleteUser",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("删除成功");
                                _this.getUserList(1);
                            } else {
                                alert("删除失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            forbidUser: function (id) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AdministratorController/userIsValid",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id,
                        isValid: 1
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("封停成功");
                                _this.getUserList(1);
                            } else {
                                alert("封停失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            unForbidUser: function (id) {
                let _this = this;
                $.ajax({
                    headers: {
                        token: $.cookie("token")
                    },
                    url: "http://localhost:8080/tshopping/AdministratorController/userIsValid",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: id,
                        isValid: 0
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            if (result.data.flag) {
                                alert("解封成功");
                                _this.getUserList(1);
                            } else {
                                alert("解封失败");
                            }
                        } else {
                            alert("您的账号在另一地点登录,您已被迫下线");
                            _this.logout();
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        alert("世界上最遥远的距离就是没网！");
                    }
                });
            },
            logout: function () {
                /**
                 * 注销，清空所有cookie(或者只清空保存着token的Cookie就行)
                 */
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (let i = keys.length; i--;)
                        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
                //返回登录页面或者主页
                window.location.href = "login.html";
            }
        }
    })
</script>
</body>
</html>